<template>
  <div>
    <div class="search">
      <el-input placeholder="请输入商品名称查询" style="width: 200px" v-model="name"></el-input>
      <el-select v-model="state" placeholder="请选择上架状态" style="margin-left: 10px">
        <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="operation">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
<!--      <el-button type="danger" plain @click="delBatch">批量删除</el-button>-->
    </div>

    <div class="table">
      <el-table :data="tableData" strip @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" width="70" align="center" sortable>
          <template slot-scope="scope">
            {{ scope.$index + 1 }} <!-- 从1开始 -->
          </template>
        </el-table-column>
        <el-table-column prop="itemId" label="商品编号"></el-table-column>
        <el-table-column label="图片">
          <template v-slot="scope">
            <div style="display: flex; align-items: center">
              <el-image style="width: 60px; height: 60px; border-radius: 80%"
                        :src="scope.row.imageUrl || defaultImageUrl"
                        :preview-src-list="[scope.row.imageUrl || defaultPreviewUrl]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="state" label="商品状态" :formatter="formatState"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="createUserName" label="创建人"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column prop="updateUserName" label="修改人"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template v-slot="scope">
            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" plain @click="del(scope.row.id)"  v-if="scope.row.username != 'admin'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>


    <el-dialog title="商品" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close @close="handleCancel">
      <el-form :model="form" label-width="100px" style="padding-right: 50px" ref="formRef" :rules="rules">
        <el-form-item label="商品编号" prop="itemId">
          <el-input v-model="form.itemId" placeholder="商品编号" :disabled="true"></el-input>
        </el-form-item>
                <el-form-item label="商品名称" prop="name">
                  <el-input v-model="form.name" placeholder="商品名称" ></el-input>
                </el-form-item>
        <el-form-item label="商品状态" >
          <el-select v-model="form.state" placeholder="请选择商品状态" >
            <el-option label="未上架" :value= "1"></el-option>
            <el-option label="已上架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="form.categoriesId" placeholder="请选择商品分类">
            <el-option
                v-for="categories in categoriesData"
                :key="categories.id"
                :label="categories.name"
                :value="categories.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/admin/api/photo/upload'"
              :headers="{ authentication: user.token }"
              :data="{ imageType: 'AVATAR'}"
              list-type="picture"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
          >
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Product",
  data() {
    return {
      //默认图片
      defaultImageUrl: 'https://img0.baidu.com/it/u=2991630058,871933297&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300',
      //默认预览
      defaultPreviewUrl: 'https://img0.baidu.com/it/u=2594677340,3536341249&fm=253&fmt=auto&app=138&f=JPG?w=240&h=240',
      tableData: [],  // 所有的数据
      categoriesData: [], //分类信息
      fileList: [], // 用于存储上传的文件列表
      stateOptions: [
        { value: 0, label: '已上架' },
        { value: 1, label: '未上架' },
      ],
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      state: null,
      name: null,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      rules: {

        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { max: 50, message: '商品名称不能超过50个字符', trigger: 'blur' }
        ],
      },
      ids: []
    }
  },
  created() {
    this.load(1)
    this.loadCategoriesData();
  },
  methods: {
    generateItemId() {
      // 获得年+月+日+时+分+秒
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以+1
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0'); // 获取秒数并格式化
      return `${year}${month}${day}${hours}${minutes}${seconds}`;
    },
    formatState(row, column, cellValue) {
      // 根据state的值返回相应的文本
      return cellValue === 1 ? '未上架' : '已上架';
    },
    handleAdd() {   // 新增数据
      this.form = {
        state: 1, //状态默认为未上架
        itemId: this.generateItemId()
      }
      this.fromVisible = true   // 打开弹窗
    },
    handleCancel(){
      this.fileList = []
      this.fromVisible = false
    },
    handleEdit(row) {   // 编辑数据
      this.fileList = []
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fileList = this.form.imageUrl ? [{name: 'current-image', url: this.form.imageUrl}] : []
      // 确保在打开弹窗前，categoriesData已经被加载
      if (!this.categoriesData.length) {
        this.loadCategoriesData().then(() => {
          // 检查form.categoriesId是否存在于categoriesData中
          const categoryExists = this.categoriesData.some(category => category.id === this.form.categoriesId);
          if (!categoryExists) {
            console.error('商品分类ID不存在于分类数据中', this.form.categoriesId);
          }
          this.fromVisible = true;   // 打开弹窗
        });
      } else {
        this.fromVisible = true;   // 打开弹窗
      }
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      // 检查fileList是否为空，如果为空，则将imageUrl设置为null
      if (this.fileList.length === 0) {
        this.form.imageUrl = null;
      }
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? '/admin/api/product/update' : '/admin/api/product/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === 0) {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/admin/api/product/delete/' + id).then(res => {
          if (res.code === 0) {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    delBatch() {   // 批量删除
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确定批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/admin/api/product/delete/batch', {data: this.ids}).then(res => {
          if (res.code === 0) {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    load(pageNum) {  // 分页查询
      if (pageNum) this.pageNum = pageNum
      this.$request.get('/admin/api/product/pages', {
        params: {
          current: this.pageNum,
          size: this.pageSize,
          name: this.name,
          state: this.state,
        }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total
      })
      this.$request.get('/admin/api/categories/pages', {
      }).then(res => {
        this.categoriesData = res.records
      })
    },
    reset() {
      this.name = null
      this.state = null
      this.load(1)
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
    handleAvatarSuccess(response, file, fileList) {
      // 定义一个正则表达式来匹配允许的文件扩展名
      const allowedExtensions = /.(png|jpg|jpeg)$/i;

      // 检查文件扩展名是否为允许的格式
      if (!allowedExtensions.test(file.name)) {
        // 如果文件扩展名不允许，从fileList中移除
        this.fileList = fileList.filter(f => f.uid !== file.uid);
        // 发出提示
        this.$message.error('只能上传png, jpg, jpeg格式的图片！');
        return; // 不进行后续操作
      }

      // 如果文件扩展名允许，更新imageUrl和fileList
      this.form.imageUrl = response.data;
      this.fileList = fileList; // 更新fileList
    },
    handleRemove(file, fileList) {
      // 删除图片时，更新fileList数组
      this.fileList = fileList;
    },
    loadCategoriesData() {
      this.$request.get('/admin/api/categories/pages').then(res => {
        this.categoriesData = res.records;
      });
    },
    getStateDescription(stateCode) {
      const stateMap = {
        1: '未上架',
        0: '已上架'
      };
      return stateMap[stateCode] || '未知状态';
    },
  }
}
</script>

<style scoped>

</style>